<template>
  <byte-banner/>
  <nav-content :type-info="{id:1,title:'新上好课',color:'red'}" :nav-list="state.newNavList"/>
  <nav-content :type-info="{id:2,title:'进站必学',color:'#3592FA'}" :nav-list="state.stationNavList"/>
  <nav-content :type-info="{id:3,title:'学习路线',color:'#4EB380'}" :nav-list="state.studyNavList"/>
  <nav-content :type-info="{id:4,title:'字节专栏',color:'black'}" :nav-list="state.byteNavList"/>
</template>

<script setup>
import ByteBanner from './components/ByteBanner.vue'
import NavContent from '../../components/NavContent.vue'
import { reactive } from 'vue'

const state = reactive({
  newNavList: [
    {
      id: 1,
      title: '推荐'
    },
    {
      id: 2,
      title: '前端开发'
    },
    {
      id: 3,
      title: '后端开发'
    },
    {
      id: 4,
      title: '精品免费'
    },
  ],
  stationNavList: [
    {
      id: 1,
      title: '推荐'
    },
    {
      id: 2,
      title: '计算机基础'
    },
    {
      id: 3,
      title: '后端开发'
    },
    {
      id: 4,
      title: '精品免费'
    },
  ],
  studyNavList: [
    {
      id: 1,
      title: '推荐'
    },
    {
      id: 2,
      title: '前端开发'
    },
    {
      id: 3,
      title: '后端开发'
    },
    {
      id: 4,
      title: '移动开发'
    },
  ],
  byteNavList: [
    {
      id: 1,
      title: '新品推荐'
    },
  ],
})

</script>

<style lang="scss" scoped>

</style>
